<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>user-list</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/lib/layuimini2/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="/lib/layuimini2/css/public.css" media="all">
	<link rel="stylesheet" href="/css/common.css" media="all">
</head>
<body>
<div class="layuimini-container">
	<div class="layuimini-main">

		<fieldset class="table-search-fieldset">
			<legend>搜索信息</legend>
			<form class="layui-form layui-form-pane" action="" lay-filter="search-form">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">姓名</label>
						<div class="layui-input-inline">
							<input type="text" name="name" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">工号</label>
						<div class="layui-input-inline">
							<input type="text" name="code" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">手机号</label>
						<div class="layui-input-inline">
							<input type="text" name="phone" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">角色</label>
						<div class="layui-input-inline" style="width: 120px">
							<select name="roleId" id="role">

							</select>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">状态</label>
						<div class="layui-input-inline" style="width: 100px">
							<select name="status">
								<option value="">不限</option>
								<option value="0">封停</option>
								<option value="1">正常</option>
							</select>
						</div>
					</div>
					<div class="layui-inline">
						<button type="submit" class="layui-btn layui-btn-primary" lay-submit
						        lay-filter="data-search-btn"><i class="layui-icon layui-icon-search"></i> 搜 索
						</button>
						<button type="button" class="layui-btn layui-btn-normal" id="add"><i
								class="layui-icon layui-icon-add-1"></i>添加
						</button>
						<button type="button" class="layui-btn" id="import">
							<i class="layui-icon layui-icon-upload"></i>导入
						</button>
						<button type="button" class="layui-btn layui-btn-primary" id="export">
							<i class="layui-icon layui-icon-download-circle"></i>导出
						</button>
						<button type="button" class="layui-btn layui-btn-normal" id="userAreaBtn">
							<i class="layui-icon layui-icon-location"></i>设置区域
						</button>
					</div>
				</div>
			</form>
		</fieldset>
		<table class="layui-hide" id="dataTableId" lay-filter="dataTableFilter"></table>

		<script type="text/html" id="dataTableBar">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="pwd">重置密码</a>
			{{#  if(d.status == 1){ }}
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="ban">封停</a>
			{{#  } }}
			{{#  if(d.status == 0){ }}
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="ban">解封</a>
			{{#  } }}
			<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="kick">下线</a>
		</script>

	</div>
</div>
<form class="layui-form layui-form-pane" id="areaForm" lay-filter="areaForm" style="display: none;padding:5px">
	<input type="hidden" name="ids" id="ids"/>
	<div class="layui-form-item" widthoffset="10">
		<div class="layui-inline">
			<label class="layui-form-label">区域</label>
			<div class="layui-input-block  col12">
				<div id="userArea"></div>
			</div>
		</div>
		<div class="layui-form-item btns">
			<div class="layui-input-block">
				<button class="layui-btn layui-btn-radius" lay-submit lay-filter="areaForm">确定</button>
				<button class="layui-btn layui-btn-radius layui-btn-primary cancel" type="button">取消</button>
			</div>
		</div>
	</div>
</form>
<form class="layui-form layui-form-pane" id="layerForm" lay-filter="dataForm" style="display: none;padding:5px">
	<input type="hidden" name="id" id="id"/>
	<input type="hidden" name="status" id="status"/>
	<div class="layui-form-item" widthoffset="10">
		<div class="layui-inline">
			<label class="layui-form-label required">用户名</label>
			<div class="layui-input-block  col4">
				<input type="text" name="username" id="username" lay-verify="required" lay-reqtext="用户名不能为空"
				       placeholder="请输入用户名" value="" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label required">角色</label>
			<div class="layui-input-block  col5">
				<select name="roleId" id="roleForm">

				</select>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label required">性别</label>
			<div class="layui-input-block  col3">
				<select name="sex">
					<option value="1">男</option>
					<option value="0">女</option>
				</select>
			</div>
		</div>
	</div>
	<div class="layui-form-item" widthoffset="5">
		<div class="layui-inline">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-block  col6">
				<input type="text" name="name" placeholder="请输入姓名" lay-verify="required" lay-reqtext="请输入姓名" value=""
				       class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">区域</label>
			<div class="layui-input-block  col6">
				<div id="area"></div>
			</div>
		</div>
	</div>
	<div class="layui-form-item" widthoffset="5">
		<div class="layui-inline">
			<label class="layui-form-label">工号</label>
			<div class="layui-input-block  col6">
				<input type="text" name="code" placeholder="请输入工号" lay-verify="required" lay-reqtext="请输入工号"
				       class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">入职时间</label>
			<div class="layui-input-block  col6">
				<input type="text" name="entryTime" autocomplete="off" class="layui-input lay-date" readonly>
			</div>
		</div>
	</div>
	<div class="layui-form-item" widthoffset="10">
		<div class="layui-inline">
			<label class="layui-form-label">微信</label>
			<div class="layui-input-block  col6">
				<input type="text" name="weixin" placeholder="请输入微信" value="" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">QQ</label>
			<div class="layui-input-block  col6">
				<input type="text" name="qq" lay-verify="positiveInteger" placeholder="请输入QQ" value=""
				       class="layui-input">
			</div>
		</div>
	</div>
	<div class="layui-form-item" widthoffset="5">
		<div class="layui-inline">
			<label class="layui-form-label">电话</label>
			<div class="layui-input-block  col6">
				<input type="text" name="phone" lay-verify="telephone" placeholder="请输入电话" value="" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">邮箱</label>
			<div class="layui-input-block  col6">
				<input type="text" name="email" lay-verify="Email" placeholder="请输入email" value="" class="layui-input">
			</div>
		</div>
	</div>
	<div class="layui-form-item" widthoffset="5" id="pwdItem">
		<div class="layui-inline">
			<label class="layui-form-label required">密码</label>
			<div class="layui-input-inline  col12">
				<input type="password" id="pwd" name="password" placeholder="请输入密码" value="" class="layui-input">
			</div>
		</div>
	</div>
	<div class="layui-form-item" widthoffset="5" id="repwdItem">
		<div class="layui-inline">
			<label class="layui-form-label required">再次输入</label>
			<div class="layui-input-inline  col12">
				<input type="password" id="rePwd" placeholder="请输入密码" value="" class="layui-input">
			</div>
		</div>
	</div>
	<div class="layui-form-item" widthoffset="5">
		<div class="layui-inline">
			<label class="layui-form-label">身份证号</label>
			<div class="layui-input-block  col12">
				<input type="text" name="idNumber" lay-verify="idCard" placeholder="请输入身份证号" value=""
				       class="layui-input">
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block col12">
			<textarea name="remark" class="layui-textarea" placeholder="请输入备注"></textarea>
		</div>
	</div>

	<div class="layui-form-item btns">
		<div class="layui-input-block">
			<button id="submitBtn" class="layui-btn layui-btn-radius" lay-submit lay-filter="layerForm">确定</button>
			<button class="layui-btn layui-btn-radius layui-btn-primary cancel" type="button">取消</button>
		</div>
	</div>
</form>

<form class="layui-form layui-form-pane" id="passwordForm" style="display: none;padding:5px">
	<input type="hidden" name="id" id="uid"/>
	<div class="layui-form-item">
		<label class="layui-form-label required">新密码</label>
		<div class="layui-input-block  col12">
			<input type="password" id="password" name="password" lay-verify="required" lay-reqtext="新密码不能为空"
			       placeholder="请输入新密码" value="" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label required">再次输入</label>
		<div class="layui-input-block  col12">
			<input type="password" id="repassword" name="password" lay-verify="required" lay-reqtext="密码不能为空"
			       placeholder="请再次输入新密码" value="" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item btns">
		<div class="layui-input-block">
			<button class="layui-btn layui-btn-radius" lay-submit lay-filter="passwordForm">确定</button>
			<button class="layui-btn layui-btn-radius layui-btn-primary cancel" type="button">取消</button>
		</div>
	</div>
</form>

<script src="/lib/layuimini2/lib/layui/layui.js" charset="utf-8"></script>
<script src="/js/common.js" charset="utf-8"></script>
<script src="/lib/layuimini2/js/lay-module/xmSelect/xm-select.js"></script>
<script src="/lib/layuimini2/js/lay-config.js" charset="utf-8"></script>

<script>
	layui.use(['form', 'table', 'laydate', 'upload'], function () {
		var $ = layui.jquery,
			form = verifyForm(layui.form),
			laydate = layui.laydate,
			table = layui.table;
		var layerFormIdx, passwordFormIdx;

		laydate.render({
			elem: ".lay-date",
			type: "date"
		});

		$(".btns .cancel").click(function () {
			layer.closeAll();
		});

		$("#export").click(function () {
			window.open("/user/export?" + json2param(form.val("search-form")));
		});

		myAjax($, layer, {
			url: "/role/listAll",
			type: 'GET',
			dataType: "json",
			success: function (d, s) {
				$("#role").html('<option value="">不限</option>' + d.data);
				$("#roleForm").html(d.data);
				form.render('select');
			}
		});

		var area, userArea, areaData;
		getAreaTree(layui, function (d, s) {
			renderAreaTree(layui, "#userArea", d.data, function (areaDom, data) {
				userArea = areaDom;
			});
			renderAreaTree(layui, "#area", d.data, function (areaDom, data) {
				areaData = data;
				area = areaDom;
			});
		});

		$("#userAreaBtn").click(function () {
			let users = table.checkStatus("dataTableId").data;
			if (users.length > 0) {
				let ids = [];
				for (let u of users) {
					ids.push(u.id);
				}
				$("#ids").val(ids.join(","));
				userArea.setValue([]);
				layerFormIdx = layerForm(layer, $, {
					title: '批量设置区域',
					content: $("#areaForm"),
					type: 1,
					area: ["300px", "400px"],
					shade: 0.2,
					maxmin: true,
					shadeClose: false,
				});
				submitLayerForm("areaForm", '/user/updateAreaByIds', "设置");
			} else {
				layer.msg('请选择用户', {icon: 0});
			}
		});

		var dataTable = myTableRend(table, layer, {
			elem: '#dataTableId',
			url: '/user/listByPage',
			//toolbar: '#toolbarDemo',
			// defaultToolbar: ['filter', 'exports', 'print', {
			// 	title: '提示',
			// 	layEvent: 'LAYTABLE_TIPS',
			// 	icon: 'layui-icon-tips'
			// }],
			cols: [[
				{type: 'checkbox'},
				{field: 'username', title: '用户名', align: "center"},
				{field: 'name', title: '用户姓名', align: "center"},
				{field: 'roleIdStr', title: '角色（岗位）', align: "center"},
				{field: 'areaIdStr', title: '区域', align: "center"},
				{field: 'code', title: '员工编号', align: "center"},
				{
					field: 'sex', title: '性别', width: 100, align: "center", templet: function (d) {
						if (d.sex == 0) {
							return '女';
						} else if (d.sex == 1) {
							return '男';
						}
					}
				},
				{field: 'phone', title: '手机号', align: "center"},
				{
					field: 'status', title: '账户状态', width: 100, align: "center", templet: function (d) {
						if (d.status == 0) {
							return '<span style="color: #f00;">封停</span>'
						} else {
							return '<span style="color: #0f0;">正常</span>'
						}
					}
				},
				{title: '操作', width: 210, toolbar: '#dataTableBar', align: "center", fixed: "right"}
			]],
			limits: [10, 15, 20, 25, 50, 100],
			limit: 15,
			page: true,
			skin: 'line',
			formatDate: ["entryTime"]
		});

		//初始化导入
		initImport(layui, {
			templet: "/user/importTemplate",
			import: "/user/importData",
			table: dataTable
		});

		// 监听搜索操作
		form.on('submit(data-search-btn)', function (data) {
			//执行搜索重载
			table.reload('dataTableId', {
				page: {
					curr: 1
				}
				, where: data.field
			});

			return false;
		});

		$("#add").click(function () {
			$("#pwdItem,#repwdItem").show();
			$("#username").removeAttr("disabled");
			$("#layerForm")[0].reset();
			$("#id").val("");
			$("#status").val("");
			area.setValue([]);
			layerFormIdx = layerForm(layer, $, {
				title: '添加用户',
				content: $("#layerForm"),
				type: 1,
				area: "540px",
				shade: 0.2,
				maxmin: true,
				shadeClose: false,
			});
			submitLayerForm("layerForm", '/user/add', "添加");
		});

		form.on('submit(passwordForm)', function (data) {
			if ($("#password").val() != $("#repassword").val()) {
				layer.msg('两次密码输入不一致', {icon: 0});
			} else {
				myAjax($, layer, {
					url: "/user/reset",
					type: 'POST',
					data: {
						id: $("#uid").val(),
						password: $("#password").val()
					},
					dataType: "json",
					success: function (d, s) {
						if (d.code == 1) {
							layer.msg('重置成功', {icon: 1, time: 1500});
						}
					},
					complete: function (xhr, status) {
						layer.close(passwordFormIdx);
					}
				});
			}
			return false;
		});

		table.on('tool(dataTableFilter)', function (obj) {
			if (obj.event === 'edit') {
				$("#pwdItem,#repwdItem").hide();
				$("#username").attr("disabled", true);
				$("#layerForm")[0].reset();
				form.val("dataForm", obj.data);
				area.setValue([findTreeNode(areaData, obj.data.areaId)]);
				layerFormIdx = layerForm(layer, $, {
					title: '修改用户',
					content: $("#layerForm"),
					type: 1,
					area: "540px",
					shade: 0.2,
					maxmin: true,
					shadeClose: false,
				});
				submitLayerForm("layerForm", '/user/edit', "更新");
			} else if (obj.event === 'pwd') {
				$("#uid").val(obj.data.id);
				passwordFormIdx = layerForm(layer, $, {
					title: '重置密码',
					content: $("#passwordForm"),
					type: 1,
					area: "300px",
					shade: 0.2,
					maxmin: true,
					shadeClose: false,
				});
			} else if (obj.event === 'ban') {
				var action, status;
				if (obj.data.status == 1) {
					action = "封停";
					status = 0;
				} else {
					action = "解封";
					status = 1;
				}
				layer.confirm('确定' + action + '吗？', function (index) {
					myAjax($, layer, {
						url: "/user/edit",
						type: 'POST',
						data: {
							id: obj.data.id,
							status: status
						},
						dataType: "json",
						success: function (d, s) {
							if (d.code == 1) {
								layer.msg(action + '成功', {icon: 1, time: 1500});
								dataTable.reload();
							}
						}
					});
					layer.close(index);
				});
			} else if (obj.event === 'kick') {
				layer.confirm('确定踢人下线吗？', function (index) {
					myAjax($, layer, {
						url: "/user/kick",
						type: 'POST',
						data: {
							id: obj.data.id
						},
						dataType: "json",
						success: function (d, s) {
							if (d.code == 1) {
								layer.msg('下线成功', {icon: 1, time: 1500});
							}
						}
					});
					layer.close(index);
				});
			}
		});

		function submitLayerForm(filter, url, action, row) {
			form.on('submit(' + filter + ')', function (data) {
				if (action == "更新") {
					delete data.field.password;
				} else if (action == "添加") {
					if ($("#pwd").val().length == 0) {
						layer.msg('请输入密码', {icon: 0});
						return false;
					}
					if ($("#pwd").val() != $("#rePwd").val()) {
						layer.msg('两次密码输入不一致', {icon: 0});
						return false;
					}
				}
				myAjax($, layer, {
					url: url,
					type: 'POST',
					data: data.field,
					dataType: "json",
					success: function (d, s) {
						if (d.code == 1) {
							layer.msg(action + '成功', {icon: 1, time: 1500});
							dataTable.reload();
						}
					},
					complete: function (xhr, status) {
						layer.close(layerFormIdx);
					}
				});
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		}
	});


</script>

</body>
</html>